<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col">
        <view class="flex-col items-center section_1">
          <view>
            <text class="text_1">￥</text>
            <text class="text_2">1200.00</text>
          </view>
          <text class="text_3">支付剩余时间：12:00:00</text>
        </view>
        <view class="flex-col section_2">
          <view class="flex-col">
            <text class="text_4">选择支付方式</text>
            <view class="flex-row group_4">
              <image
			   :src="imgUrl+'16557826853728368203.png'"
              
                class="image_1"
              />
              <text class="text_5">微信支付</text>
            </view>
          </view>
          <view class="justify-between group_5">
            <view class="flex-row">
              <image
			   :src="imgUrl+'16557826855118912327.png'"
               
                class="image_1 image_3"
              />
              <text class="text_6">支付宝支付</text>
            </view>
            <image
			:src="imgUrl+'16557826855728271880.png'"
             
              class="image_4"
            />
          </view>
        </view>
      </view>
      <view class="flex-col items-center button"><text class="text_7">立即支付</text></view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
		  imgUrl:this.$IMG_URL,
	  };
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
  .image_1 {
    width: 56rpx;
    height: 56rpx;
  }
  .page {
    background-color: #f6f7f9;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    padding-bottom: 64rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .button {
    margin: 423rpx 32rpx 0;
    padding: 19rpx 0 31rpx;
    background-color: #1d6aff;
    border-radius: 44rpx;
  }
  .section_1 {
    padding: 74rpx 0 59rpx;
    background-color: #ffffffff;
  }
  .section_2 {
    margin-top: 20rpx;
    padding: 30rpx 32rpx 32rpx;
    background-color: #ffffffff;
  }
  .text_7 {
    color: #ffffff;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_3 {
    margin-top: 41rpx;
    color: #666666;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_5 {
    margin-top: 66rpx;
  }
  .text_1 {
    color: #fe641a;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_2 {
    color: #fe641a;
    font-size: 48rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 56rpx;
  }
  .text_4 {
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_4 {
    margin-top: 39rpx;
    padding-top: 34rpx;
    border-top: solid 2rpx #eeeeee;
  }
  .image_4 {
    align-self: center;
    border-radius: 50%;
    width: 36rpx;
    height: 36rpx;
  }
  .text_5 {
    margin-left: 24rpx;
    margin-top: 3rpx;
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .image_3 {
    flex-shrink: 0;
  }
  .text_6 {
    margin-left: 24rpx;
    margin-top: 3rpx;
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
</style>